<script setup lang="ts">

import {computed, reactive, ref} from "vue";
import {CommonTemplate, saveOrUpdateTemplate} from "@/api/invoiceController.ts";
import {FieldRule, Message} from "@arco-design/web-vue";
import {useWindowSize} from "@vueuse/core/index";
import {invoiceTypes} from '@/views/invoice/enums'

const visible = ref<boolean>(false)
const type = ref<'add' | 'edit'>('add')
const formRef = ref()
const editId = ref('')

const emit = defineEmits(['finish'])
const open = (typeProp: 'add' | 'edit', data?: CommonTemplate) => {
  visible.value = true
  type.value = typeProp
  if (typeProp === 'edit') {
    console.log('edit', data)
    editId.value = data?.id || ''
    Object.assign(form, data)
  }
}

const form = reactive({
  id: '',
  buyer: '',
  seller: '',
  taxNumber: '',
  address: '',
  bank: '',
  bankAccount: '',
  phone: '',
  defaultInvoiceType: ''
})

const rules = {
  buyer: [
    {required: true, message: '请输入开票名称'}
  ],
  seller: [
    {required: true, message: '请输入卖方'}
  ],
  taxNumber: [
    {required: true, message: '请输入税号'}
  ]
}


const close = () => {
  formRef.value.resetFields()
}
const {width} = useWindowSize()
const isPhone = computed(() => {
  return width.value < 768
})


const submit = async () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate((error) => {
      if (!error) {
        if (type.value === 'add') {
          if (form.id) form.id = ''
        }
        saveOrUpdateTemplate(form).then(res => {
          if (res) {
            resolve(true)
            Message.success('操作成功')
            visible.value = false
            formRef.value.resetFields()
            emit('finish')
          } else {
            Message.error('操作失败')
            reject(false)
          }
        })
      } else {
        reject(error)
      }
    })
  })
}
defineExpose({open})
</script>

<template>
  <a-modal v-model:visible="visible" :title="type === 'add' ? '新增模板' : '编辑模板'" :on-before-ok="submit"
           @close="close" :width="isPhone ? '90vw': undefined">
    <a-form ref="formRef" :model="form" :rules="rules" :layout="isPhone ? 'vertical' : 'horizontal'">
      <a-form-item label="开票名称" field="buyer">
        <a-input v-model="form.buyer"></a-input>
      </a-form-item>
      <a-form-item label="卖方" field="seller">
        <a-select v-model="form.seller" :options="['顺丰', '合丰']"></a-select>
      </a-form-item>
      <a-form-item label="税号" field="taxNumber">
        <a-input v-model="form.taxNumber"></a-input>
      </a-form-item>
      <a-form-item label="地址" field="address">
        <a-input v-model="form.address"></a-input>
      </a-form-item>
      <a-form-item label="开户银行" field="bank">
        <a-input v-model="form.bank"></a-input>
      </a-form-item>
      <a-form-item label="银行账号" field="bankAccount">
        <a-input v-model="form.bankAccount"></a-input>
      </a-form-item>
      <a-form-item label="联系电话" field="phone">
        <a-input v-model="form.phone"></a-input>
      </a-form-item>
      <a-form-item label="默认开票类型" field="defaultInvoiceType">
        <a-select v-model="form.defaultInvoiceType" :options="invoiceTypes" allow-clear></a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style scoped lang="scss">

</style>
